<template>
  <div>
    <common-map>
      <template v-slot:header>
        <el-date-picker
          class="date-picker"
          v-model="dateValue"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
        />
        <el-select
          v-model="typeValue"
          placeholder="请选择流量类型"
          class="type-picker"
          popper-class="select-popper"
        >
          <el-option
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-button type="primary" @click="confirm">搜索</el-button>
      </template>
      <template v-slot:main>
        <div class="time-wrap">
          <el-table
            :data="tableData"
            stripe
            style="width: 100%"
            :header-row-style="{background:'transparent',color: '#ffffff'}"
            :header-cell-style="{background:'transparent'}"
            :cell-style="{background:'transparent'}"
            :row-style="{background:'transparent',color: '#ffffff'}">
            <el-table-column
              prop="imsi"
              label="手机卡码">
            </el-table-column>
            <el-table-column
              prop="imei"
              label="手机串码">
            </el-table-column>
            <el-table-column
              prop="loc"
              label="手机归属地">
            </el-table-column>
            <el-table-column
              prop="tel"
              label="电话号码">
            </el-table-column>
            <el-table-column
              prop="service"
              label="运营商">
            </el-table-column>
            <el-table-column
              prop="ent"
              label="卡口">
            </el-table-column>
            <el-table-column
              prop="spec"
              label="是否特定人员">
            </el-table-column>
            <el-table-column
              prop="time"
              label="出现时间">
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            class="time-page">
          </el-pagination>
        </div>
      </template>
    </common-map>
  </div>
</template>

<script>
import CommonMap from '@/components/CommonMap/index.vue'

export default {
  name: 'index',
  data () {
    return {
      tableData: [],
      currentPage: 1,
      total: 0,
      limit: 10,
      typeValue: '',
      typeOptions: [
        {
          value: '0',
          label: '客流量'
        },
        {
          value: '1',
          label: '车流量'
        }
      ],
      dateValue: [
        new Date(new Date().getTime() - 3600 * 24 * 1000 * 7),
        new Date()
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end], true)
            }
          },
          {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end], true)
            }
          },
          {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end], true)
            }
          }
        ]
      }
    }
  },
  components: {
    CommonMap
  }
}
</script>

<style scoped>
  .time-wrap {
    width: 100%;
    box-sizing: border-box;
    padding: 1rem;
    margin-top: 1rem;
    text-align: center;
  }

  .time-choose {
    text-align: left;
    margin-bottom: 1rem;
  }

  .time-search {
    margin-left: 1rem;
  }

  .el-input__inner, .el-range-editor /deep/ .el-range-input {
    background-color: unset;
  }

  .el-date-editor /deep/ .el-range-separator {
    color: #ffffff;
  }

  .el-table {
    background-color: transparent;
  }

  .el-table:before {
    height: 0;
  }

  .el-pagination /deep/ .el-pagination__total, .el-pagination /deep/ .el-pagination__jump {
    color: #ffffff;
  }
</style>
